<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件上传示例</title>
  </head>
  <body>
    <div class="app">
      <!-- input 元素添加type=file 是原生上传的唯一方式 -->
      <input type="file" id="fileInput" />
      <button id="btn">点击上传文件</button>
    </div>

    <!-- 引入腾讯云 COS SDK -->
    <script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>

    <script>
      // ✅ 正确位置：在 DOM 元素加载后初始化 COS
      const btn = document.getElementById("btn");
      const fileInput = document.getElementById("fileInput");

      // 初始化 COS 实例（替换为你的临时密钥）
      const cos = new COS({
        SecretId: "AKID284I0Yt0tZBtTq0AE8qLd3IK8nGWZQ5X",
        SecretKey: "INQj3GH5g9PSIwiKjvufCWdXEhy2uZ1G",
      });

      // 上传函数
      function upload() {
        const file = fileInput.files[0];
        if (!file) {
          alert("请先选择文件！");
          return;
        }

        cos.putObject(
          {
            Bucket: "my-upload-bucket-1311077321", // 你的存储桶名称
            Region: "ap-guangzhou", // 存储桶地域
            Key: `uploads/${file.name}`, // 存储路径
            Body: file, // 文件对象
            onProgress: (progress) => {
              console.log(`进度: ${Math.round(progress.percent * 100)}%`);
            },
          },
          (err, data) => {
            if (err) {
              console.error("上传失败:", err);
            } else {
              console.log("上传成功:", data.Location);
              alert("上传成功！");
            }
          }
        );
      }

      // 绑定点击事件
      btn.addEventListener("click", upload);
    </script>
  </body>
</html>
